<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <link rel="stylesheet"  th:href="@{/css/file.css}" />
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
</head>
<body>
<form class="layui-form"  method="post" th:action="@{/tea/exam/content/addsubmit}" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">考题类型</label>
        <div class="layui-input-block">
            <button class="layui-btn" id="radio">单选题</button>
            <button class="layui-btn" id="checkbox">多选题</button>
            <button class="layui-btn" id="essay">问答题</button>
            <button class="layui-btn" id="picture">图文题</button>
            <div class="layui-form-mid layui-word-aux">布置题目前请先点击是哪个类型的题目</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">哪张试卷</label>
        <div class="layui-input-block">
            <select name="exam_id" lay-verify="required">
                <option value="">请选择</option>
                <option th:each="exam:${exams}" th:value="${exam.getId()}" th:text="${exam.getName()}"></option>
            </select>
        </div>
    </div>

<!--    课程类型-->
    <input type="hidden" name="type_id" id="type_id" value="1">

    <div class="layui-form-item" >
        <label class="layui-form-label">题目</label>
        <div class="layui-input-block">
            <input type="text" name="subject" required  lay-verify="required" placeholder="如：计算机系统分为几个层次" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" id="picture_a">
        <label class="layui-form-label">题目图片</label>
        <div class="layui-input-block">
            <a href="javascript:;" class="file">格式.jpg/.png
                <input type="file" name="img"  lay-verify="image" autocomplete="off" id="user-image" >
            </a>
        </div>
    </div>

    <div class="layui-form-item" id="picture_b">
        <label class="layui-form-label">预览</label>
        <div class="layui-input-block">
            <!-- 显示图像预览 -->
            <img style="width: 300px;height: 200px;" class="ui big bordered image" id="img">
        </div>
    </div>
    <div class="layui-form-item" id="choose_a">
        <label class="layui-form-label">选项A</label>
        <div class="layui-input-block">
            <input type="text" name="answer_a"  placeholder="请输入选项" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="choose_b">
        <label class="layui-form-label">选项B</label>
        <div class="layui-input-block">
            <input type="text" name="answer_b"  placeholder="请输入选项" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="choose_c">
        <label class="layui-form-label">选项C</label>
        <div class="layui-input-block">
            <input type="text" name="answer_c"  placeholder="请输入选项" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="choose_d">
        <label class="layui-form-label">选项D</label>
        <div class="layui-input-block">
            <input type="text" name="answer_d"  placeholder="请输入选项" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit type="submit" id="buttonsubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

    });
    $(function(){
        //上传图像预览
        $('#user-image').on('change',function() {
            $('#img').attr('src', window.URL.createObjectURL(this.files[0]));
        });
    });

    $(document).ready(function () {

        //先暂时把所有的信息隐藏起来
        $('#choose_a').hide();
        $('#choose_b').hide();
        $('#choose_c').hide();
        $('#choose_d').hide();
        $('#picture_a').hide();
        $('#picture_b').hide();
        $('#buttonsubmit').hide();

        $('#picture').click(function () {
            $('#picture_a').show();
            $('#picture_b').show();
            $('#choose_a').hide();
            $('#choose_b').hide();
            $('#choose_c').hide();
            $('#choose_d').hide();
            $('#type_id').val(4);
            $('#buttonsubmit').show();
        });
        $('#essay').click(function () {
            $('#picture_a').hide();
            $('#picture_b').hide();
            $('#choose_a').hide();
            $('#choose_b').hide();
            $('#choose_c').hide();
            $('#choose_d').hide();
            $('#type_id').val(3);
            $('#buttonsubmit').show();
        });
        $('#radio').click(function () {
            $('#picture_a').hide();
            $('#picture_b').hide();
            $('#choose_a').show();
            $('#choose_b').show();
            $('#choose_c').show();
            $('#choose_d').show();
            $('#type_id').val(1);
            $('#buttonsubmit').show();
        });
        $('#checkbox').click(function () {
            $('#picture_a').hide();
            $('#picture_b').hide();
            $('#choose_a').show();
            $('#choose_b').show();
            $('#choose_c').show();
            $('#choose_d').show();
            $('#type_id').val(2);
            $('#buttonsubmit').show();
        });
        $('#buttonsubmit').click(function () {
            var ii = layer.load();
        });

    })
</script>
</html>